<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .info {
            border: blue 1px solid;
            width: 100%;
            min-height: 100px;
            max-height: 200px;
            overflow: scroll;
        }
    </style>

    <script>

        /**
         * 由于Position等对象的部分属性，无法直接获取，所以这里写了一个函数用于解决这类问题。
         **/
        function convertObjectToObj(object) {
            if (!object) {
                return;
            }

            var obj = {};
            for (const key in object) {
                const value = object[key];
                if (typeof value == 'object') {
                    obj[key] = convertObjectToObj(value);
                } else {
                    obj[key] = value;
                }
            }

            // var obj = {};
            // obj.coords = {};
            // obj.coords.latitude = position.coords.latitude;
            // obj.coords.longitude = position.coords.longitude;
            // obj.coords.altitude = position.coords.altitude;
            // obj.coords.accuracy = position.coords.accuracy;
            // obj.coords.altitudeAccuracy = position.coords.altitudeAccuracy;
            // obj.coords.speed = position.coords.speed;
            // obj.timestamp = position.timestamp;

            return obj;
        }
    </script>

</head>

<body>
    <script>
        var mylocation = undefined;
    </script>

    <div>
        chrome浏览器，开启location模拟的方法：<br>
        1. 右上角三个点按钮，依次打开“更多工具”、“开发者工具”。<br>
        2. 右上角下面，“开发者工具”中的三个点按钮，依次点击“More tools”、“Sensor”。<br>
        3. 在Sensor页，调整Location相关选项的值。<br>
    </div>

    <hr>

    <button onclick="doGetCurrentPosition();">getCurrentPosition</button>
    <pre id="info_1" class="info"></pre>
    <script>
        /**
         * getCurrentPosition
         **/
        function doGetCurrentPosition() {
            if (!navigator.geolocation) {
                alert('Your browser does not support the geolocation');
                return;
            }
            var successCallback = function (position) {
                var infoNode = document.getElementById('info_1');
                infoNode.innerText = JSON.stringify(convertObjectToObj(position), null, 2);
            };
            var errorCallback = function (positionError) {
                var infoNode = document.getElementById('info_1');
                infoNode.innerText = JSON.stringify(convertObjectToObj(positionError), null, 2);
                switch (positionError.code) {
                    case GeolocationPositionError.PERMISSION_DENIED:
                        infoNode.innerText += '\r\t' + positionError.code + '：地理位置信息的获取失败，因为该页面没有获取地理位置信息的权限。';
                        break;
                    case GeolocationPositionError.POSITION_UNAVAILABLE:
                        infoNode.innerText += '\r\t' + positionError.code + '：地理位置获取失败，因为至少有一个内部位置源返回一个内部错误。';
                        break;
                    case GeolocationPositionError.TIMEOUT:
                        infoNode.innerText += '\r\t' + positionError.code + '：获取地理位置超时，通过定义PositionOptions.timeout 来设置获取地理位置的超时时长。';
                        break;
                    default:
                        infoNode.innerText += '\r\t' + positionError.code + '：获取地理位置失败，其它错误信息。';
                        break;
                }
            }
            var options = {
                enableHighAccuracy: true,
                timeout: 1000,
                maximumAge: 0
            };
            navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);

        }
    </script>

    <hr>

    <div>
        <button onclick="doWatchPosition();">watchPosition</button>
        <button onclick="doClearWatch();">clearWatch</button>
        <pre id="info_2" class="info"></pre>
    </div>
    <script>
        var watchPositionId = undefined;

        // watchPosition
        function doWatchPosition() {
            if (watchPositionId) {
                return;
            }

            if (!navigator.geolocation) {
                alert('Your browser does not support the geolocation');
                return;
            }
            var successCallback = function (position) {
                var infoNode = document.getElementById('info_2');
                infoNode.innerText = JSON.stringify(convertObjectToObj(position), null, 2);
                mylocation=position;
            };
            var errorCallback = function (positionError) {
                var infoNode = document.getElementById('info_2');
                infoNode.innerText = JSON.stringify(convertObjectToObj(positionError), null, 2);
                switch (positionError.code) {
                    case GeolocationPositionError.PERMISSION_DENIED:
                        infoNode.innerText += '\r\t' + positionError.code + '：地理位置信息的获取失败，因为该页面没有获取地理位置信息的权限。';
                        break;
                    case GeolocationPositionError.POSITION_UNAVAILABLE:
                        infoNode.innerText += '\r\t' + positionError.code + '：地理位置获取失败，因为至少有一个内部位置源返回一个内部错误。';
                        break;
                    case GeolocationPositionError.TIMEOUT:
                        infoNode.innerText += '\r\t' + positionError.code + '：获取地理位置超时，通过定义PositionOptions.timeout 来设置获取地理位置的超时时长。';
                        break;
                    default:
                        infoNode.innerText += '\r\t' + positionError.code + '：获取地理位置失败，其它错误信息。';
                        break;
                }
            }
            var options = {
                enableHighAccuracy: true,
                timeout: 10,
                maximumAge: 0
            };
            watchPositionId = navigator.geolocation.watchPosition(successCallback, errorCallback, options);
        }

        // 
        // doClearWatch
        function doClearWatch() {
            if (!watchPositionId) {
                return;
            }
            if (!navigator.geolocation) {
                alert('Your browser does not support the geolocation');
                return;
            }
            navigator.geolocation.clearWatch(watchPositionId);
            watchPositionId = undefined;
        }
    </script>

    <hr>
    <p>测试发现，执行watchPosition之后，再执行getCurrentPosition会产生超时问题；而执行clearWatch之后，getCurrentPosition恢复可用。</p>
    <p>测试发现，使用模拟传感器的位置，目前仅能获取坐标的：latitude、longitude、accuracy。</p>
</body>

</html>